import React, {Component} from 'react';
import Lng from "../common/lng";
import {InputNumber, Select, Form, Spin, Row, Col, Input} from "antd";
import Service from "./Service";

class EditIntervalForm extends Component {

    state = {
        interval: {},
        loading: true
    }

    componentDidMount() {
        const self = this;
        Service.detailInterval(this.props.id, (data) => {
            self.setState({
                interval: data.data,
                loading: false
            });
        });
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 15},
            }
        };
        const {interval, loading} = this.state;
        const self = this;
        return (
            <Spin spinning={loading}>
                <Form>
                    <Form.Item className={"hide"}>
                        {getFieldDecorator('id', {
                            initialValue: interval.id
                        })(
                            <Input className={"hide"}/>
                        )}
                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        label={Lng.get("dishTypeInterval.preDish")}
                    >
                        <label>{interval.preDishName}</label>
                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        label={Lng.get("dishTypeInterval.nextDish")}
                    >
                        <label>{interval.nextDishName}</label>
                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        label={Lng.get("dishTypeInterval.interval")}
                    >
                        {getFieldDecorator('constraintTime', {
                            rules: [{
                                required: true,
                                message: Lng.get("common.placeholder", {some: Lng.get("dishTypeInterval.interval")})
                            }],
                            initialValue: interval.constraintTime
                        })(
                            <InputNumber min={0}/>
                        )}
                    </Form.Item>
                    <Form.Item
                        {...formItemLayout}
                        label={Lng.get("dishTypeInterval.intervalUnit")}
                    >
                        {getFieldDecorator('constraintTimeUnit', {
                            rules: [{
                                required: true,
                                message: Lng.get("common.select", {some: Lng.get("dishTypeInterval.intervalUnit")})
                            }],
                            initialValue: interval.constraintTimeUnit
                        })(
                            <Select style={{width: 90}}>
                                <Select.Option key={"".uuid()} value={"H"}>{Lng.get("common.H")}</Select.Option>
                                <Select.Option key={"".uuid()} value={"M"}>{Lng.get("common.M")}</Select.Option>
                                <Select.Option key={"".uuid()} value={"S"}>{Lng.get("common.S")}</Select.Option>
                            </Select>
                        )}
                    </Form.Item>
                </Form>
            </Spin>
        )
    }
}

const _EditIntervalForm = Form.create()(EditIntervalForm);
export default _EditIntervalForm;